<template>
    <div class="register">
        <div class="top">
            <div class="title">{{ hosptialStore.hospitalInfo.hospital?.hosname }}</div>
            <div class="level">{{ hosptialStore.hospitalInfo.hospital?.param.hostypeString }}</div>
        </div>
        <div class="info">
            <div class="left">
                <img :src="`data:image/jpeg;base64,${hosptialStore.hospitalInfo.hospital?.logoData}`" alt="">
            </div>
            <div class="right">
                <div class="register_rule">
                    <h1>挂号规则</h1>
                    <div class="time">
                        预约周期:10天 
                        放号时间:{{ hosptialStore.hospitalInfo.bookingRule?.releaseTime }}
                        停挂时间:{{ hosptialStore.hospitalInfo.bookingRule?.stopTime }}
                    </div>
                    <div class="address">
                        具体位置:{{  hosptialStore.hospitalInfo.hospital?.param.fullAddress }}
                    </div>
                    <div class="route">
                        具体路线:{{ hosptialStore.hospitalInfo.hospital?.route }}
                    </div>
                    <div class="outTime">
                        退号时间:就诊前一工作日{{ hosptialStore.hospitalInfo.bookingRule?.quitTime }}前取消
                    </div>
                </div>
                <div class="appointment_rule">
                    <h1>预约规则</h1>
                    <span v-for="(item,index) in hosptialStore.hospitalInfo.bookingRule?.rule" :key="index">
                     {{ index + 1 }}.{{ item }}
                    </span>
                </div>
            </div>
        </div>
        <!-- 科室 -->
        <div class="department">
            <div class="left">
                <ul>
                    <li @click="showactive(index)" :class="{active:index===currentIndex}" v-for="(item,index) in hosptialStore.HospitalDepartmentInfo" :key="item.depcode">
                        {{ item.depname }}
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="bigdepartment" v-for="(item) in hosptialStore.HospitalDepartmentInfo" :key="item.depcode">
                    <h1 class="cur">{{ item.depname }}</h1>
                    <ul>
                        <li @click="toLogin(obj)" v-for="(obj) in item.children" :key="obj.depcode">
                            {{obj.depname}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
//引入仓库数据
import useDetailStore from '@/store/modules/hosptialDetail'
const hosptialStore=useDetailStore()
/* import userInfoStore from "@/store/modules/user"; */
import { useRouter, useRoute } from "vue-router";
//获取路由器
const $router = useRouter();
// 获取路由对象
const $route = useRoute();
/* const userStore=userInfoStore() */
//控制科室高亮
const currentIndex =ref<number>(0)
const showactive=(index:number)=>{
    currentIndex.value=index
    //点击导航滚动到相应科室
    const toH1=document.querySelectorAll('.cur')
    toH1[currentIndex.value].scrollIntoView({
        behavior:"smooth"
    })
}
//点击科室没有登录
const toLogin=(item:any)=>{
    /* userStore.visiable=!userStore.visiable */
    $router.push({
    path: "/hospitaldetails/register_step1",
    query: { hoscode: $route.query.hoscode, depcode: item.depcode },
  });
}
</script>

<style lang="less" scoped>
.register{
    .top{
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        .title{
            font-size: 20px;
            font-weight: 700;
            margin-right: 20px;
        }
        .level{
            color: #7f7f7f;
        }
    }
    .info{
        display: flex;
        .left{
            img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        }
        .right{
            flex: 1;
            margin-left: 8px;
            .time,.address,.route,.outTime,span{
                margin-top: 10px;
                color: #7f7f7f;
                font-size: 14px;
            }
            .appointment_rule{
                margin-top: 20px;
                h1{
                    margin-bottom: 10px;
                }
            }
        }
        
    }
    .department{
        height: 500px;
        width: 100%;
        display: flex;
        margin-top: 40px;
        .left{
            width: 80px;
            ul{
                width: 100%;
                height: 100%;
                background: rgb(248, 248, 248);
                display: flex;
                flex-direction: column;
                li{
                    flex: 1;
                    text-align: center;
                    color: #7f7f7f;
                    font-size: 14px;
                    line-height: 40px;
                    cursor: pointer;
                    &.active{
                        border-left: 1px solid red;
                        color: red;
                        background-color: white;
                    }
                }
            }
        }
        .right{
            flex: 1;
            margin-left: 20px;
            height: 100%;
            overflow: auto;
            &::-webkit-scrollbar{
                display: none;
            }
            .bigdepartment{
                margin-bottom: 10px;
                h1{
                    background-color: rgb(248, 248, 248);
                    font-weight: 600;
                }
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 33%;
                        color: #7f7f7f;
                        line-height: 30px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>